<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="view/css/import.css"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8"/>
<title>汎用CSV抽出</title>
</head>

<body id="layres">
<div class="layreshdr">
	<div>
		ダウンロード項目選択
	</div>

	<div id="topMessage">${MESSAGE}</div>
</div>
<div class="layresmaj">
	<div class="layrespri">
		<form id="search" method="post" action="${ACTION_PATH}">
		<div>
			<label for="defineName">使用定義名:</label>
			<select name="DefineName" id="defineName">
				<c:forEach items="${band.DefineNameValue}" var="bnd">
					<utl:select var="sel" name="DefineName" value="${bnd.DefineNameValue}"/>
					<option value="${sel}">${bnd.DefineNameLabel}</option>
				</c:forEach>
			</select>
			<button type="button" class="search">検索</button>
		</div>
		</form>

		<c:if test="${fn:contains(REQUEST_QUERY, 'Id=')}">
		<utl:encode var="fname" value="${UserPatternName}.csv" encoding="UTF-8" />
		<div>
		<form method="get" action="EXPORT/${fname}">
			<input type="hidden" name="Id" value="${Id}"/>
			<button type="submit">ダウンロード</button>
		</form>
		</div>
		<a class="detail" href="javascript:void(0);">詳細設定</a>
		</c:if>

		<form id="form" method="post" style="${AID eq 'search' ? '' : 'display:none'}">
		<input type="hidden" name="Version" value="${empty Version ? '1' : Version}" />
		<input type="hidden" name="DefineName" value="${DefineName}"/>
		<c:if test="${fn:length(array.ItemValue) gt 0}">
		<div>
			<label>項目名出力:</label>
			<utl:check var="chk" name="Header" value="1"/>
			<input type="checkbox" name="Header" value="${chk}" id="hd"/>
			<label for="hd">あり</label>
		</div>

		<div>
			<table class="fixborder dnd float_left right_space">
				<caption>【項目】</caption>
				<tr class="nodrop nodrag">
					<th>
						出力
					</th>
					<th>
						項目名
					</th>
					<th>
						集計
					</th>
					<th>
						集約
					</th>
				</tr>
				<c:forEach items="${band.ItemValue}" var="bnd" varStatus="i">
				<tr>
					<td align="center">
						<utl:check var="chk" name="ColumnOrder" value="${i.count}"/>
						<input type="checkbox" name="ColumnOrder" value="${chk}" class="nodrag"/>
					</td>
					<td>
						<input type="hidden" name="ItemValue" value="${bnd.ItemValue}"/>
						<input type="hidden" name="ItemLabel" value="${bnd.ItemLabel}"/>
						${bnd.ItemLabel}
					</td>
					<td>
						<select name="AggregationKbn">
							<option value="0"></option>
							<utl:select var="sel" name="AggregationKbn" value="1" index="${i.index}"/>
							<option value="${sel}">AVG</option>
							<utl:select var="sel" name="AggregationKbn" value="2" index="${i.index}"/>
							<option value="${sel}">COUNT</option>
							<utl:select var="sel" name="AggregationKbn" value="3" index="${i.index}"/>
							<option value="${sel}">MAX</option>
							<utl:select var="sel" name="AggregationKbn" value="4" index="${i.index}"/>
							<option value="${sel}">MIN</option>
							<utl:select var="sel" name="AggregationKbn" value="5" index="${i.index}"/>
							<option value="${sel}">SUM</option>
						</select>
					</td>
					<td align="center">
						<utl:check var="chk" name="GroupFlg" value="${i.index}"/>
						<input type="checkbox" name="GroupFlg" value="${chk}" class="nodrag"/>
					</td>
				</tr>
				</c:forEach>
			</table>
			<table class="fixborder dnd">
				<caption>【順序】</caption>
				<tr class="nodrop nodrag">
					<th>
						項目名
					</th>
					<th>
						昇降
					</th>
				</tr>
				<c:set var="val" value="${not empty OrderItem ? array.OrderItem : array.ItemValue}"/>
				<c:set var="lbl" value="${not empty OrderLabel ? array.OrderLabel : array.ItemLabel}"/>
				<c:forEach items="${val}" varStatus="i">
				<tr>
					<c:set var="idx" value="${i.index}"/>
					<c:forEach items="${array.OrderSort}" varStatus="j">
						<c:if test="${array.OrderSort[j.index] eq i.count}">
						<c:set var="idx" value="${j.index}"/>
						</c:if>
					</c:forEach>
					<td>
						<input type="hidden" name="OrderItem" value="${val[idx]}"/>
						<input type="hidden" name="OrderLabel" value="${lbl[idx]}"/>
						${lbl[idx]}
					</td>
					<td>
						<select name="OrderFlg">
							<option></option>
							<utl:select var="sel" name="OrderFlg" value="0" index="${idx}"/>
							<option value="${sel}">▲昇順</option>
							<utl:select var="sel" name="OrderFlg" value="1" index="${idx}"/>
							<option value="${sel}">▽降順</option>
						</select>
					</td>
				</tr>
				</c:forEach>
			</table>
		</div>

		<div style="overflow-x:scroll">
		<label>【条件】</label>
		<table id="condTable" class="fixborder dnd">
			<thead>
				<tr class="nodrag nodrop">
					<th></th>
					<th colspan="2">
					<a href="javascript:void(0);" class="addcol">追加→</a>
					</th>
					<c:forEach begin="2" end="${ConditionColumn}">
					<th colspan="2" align="center">
					<button type="button" class="delcol">削除</button>
					</th>
					</c:forEach>
				</tr>
			</thead>
			<tbody>
				<tr class="nodrag nodrop item">
				<td><a href="javascript:void(0);" class="addrow">追加↓</a></td>
				<c:forEach begin="1" end="${not empty ConditionColumn ? ConditionColumn : 1}" varStatus="i" >
					<td colspan="2" align="center">
						<select name="ItemName">
							<option></option>
							<c:forEach items="${band.ItemValue}" var="bnd">
								<utl:select var="sel" name="ItemName" value="${bnd.ItemValue}" index="${i.index - 1}"/>
								<option value="${sel}">${bnd.ItemLabel}</option>
							</c:forEach>
						</select>
					</td>
				</c:forEach>
				</tr>
				<c:forEach items="${array.Operator}" varStatus="i" >
				<c:if test="${empty ConditionColumn or i.index mod ConditionColumn eq 0}">
					<c:if test="${i.index gt 0}">
					<c:out value="</tr>" escapeXml="false"/>
					</c:if>
					<c:out value="<tr>" escapeXml="false"/>
					<td align="center">
						<button type="button" class="remove">削除</button>
					</td>
				</c:if>
					<td align="center">
						<select name="Operator">
							<option></option>
							<utl:select var="sel" name="Operator" value="EQ" index="${i.index}"/>
							<option value="${sel}">=</option>
							<utl:select var="sel" name="Operator" value="NE" index="${i.index}"/>
							<option value="${sel}">!=</option>
							<utl:select var="sel" name="Operator" value="LT" index="${i.index}"/>
							<option value="${sel}">&lt;</option>
							<utl:select var="sel" name="Operator" value="GT" index="${i.index}"/>
							<option value="${sel}">&gt;</option>
							<utl:select var="sel" name="Operator" value="LE" index="${i.index}"/>
							<option value="${sel}">&lt;=</option>
							<utl:select var="sel" name="Operator" value="GE" index="${i.index}"/>
							<option value="${sel}">&gt;=</option>
							<utl:select var="sel" name="Operator" value="IN" index="${i.index}"/>
							<option value="${sel}">IN</option>
							<utl:select var="sel" name="Operator" value="LK" index="${i.index}"/>
							<option value="${sel}">LIKE</option>
						</select>
					</td>
					<td>
						<input type="text" name="Condition" value="${array.Condition[i.index]}" maxlength="100" size="16"/>
					</td>
				</c:forEach>
				<c:if test="${fn:length(array.Operator) gt 0}">
					<c:out value="</tr>" escapeXml="false"/>
				</c:if>
			</tbody>
		</table>
		</div>

		<div>
			<label for="userPatternName">登録パターン名:</label>
			<input type="text" name="UserPatternName" maxlength="40" value="${UserPatternName}"/>
		</div>
		</c:if>
		</form>
	</div>

	<div class="layrester" style="${AID eq 'search' ? '' : 'display:none'}">
		<c:if test="${fn:length(array.ItemValue) gt 0}">
		<div>
			<button type="button" class="test">テスト</button>
			<c:if test="${fn:contains(REQUEST_QUERY, 'Id=')}">
			<button type="button" class="delptn">削除</button>
			</c:if>
			<button type="button" class="register">登録</button>
		</div>
		</c:if>
	</div>
</div>
<div class="layresftr">
	<div class="layresftr1">
	</div>
	<div class="layresftr2">
	</div>
</div>

<table style="display:none">
	<tr id="row1">
		<th colspan="2" align="center">
		<button type="button" class="delcol" >削除</button>
		</th>
		<td align="center">
			<button type="button" class="remove">削除</button>
		</td>
	</tr>
	<tr id="row2">
		<td align="center">
			<select name="Operator">
				<option></option>
				<option value="EQ">=</option>
				<option value="NE">!=</option>
				<option value="LT">&lt;</option>
				<option value="GT">&gt;</option>
				<option value="LE">&lt;=</option>
				<option value="GE">&gt;=</option>
				<option value="IN">IN</option>
				<option value="LK">LIKE</option>
			</select>
		</td>
		<td>
			<input type="text" name="Condition" maxlength="100" size="16"/>
		</td>
	</tr>
</table>

<script src="view/js/jquery.js"></script>
<script src="view/js/jquery.tablednd_0_5.js"></script>
<script src="view/js/submit.js"></script>
<script>
//<![CDATA[
$(document).ready(function() {
	function renum(num) {
		$('input[name=ColumnOrder]').each(function(){$(this).val(num);num+=1;});
	}
	$('button.search').click(function(){VIEW.submit.post('search', 'search');});
	$('button.test').click(function(){renum(1);VIEW.submit.post('form', 'test');});
	$('button.register').click(function(){if (window.confirm('登録します。よろしいですか？')) {renum(1);VIEW.submit.post('form', 'register');}});
	$('button.delptn').click(function(){if (window.confirm('パターン削除します。よろしいですか？')) {VIEW.submit.post('form', 'delete');}});

	$('table.dnd').tableDnD();
	$('button.remove').click(function() {$(this).closest('tr').remove();});

	$('a.addcol').click(function(){
		$(this).closest('table').find('tr').each(function(idx){
			if ($(this).parent().get(0).tagName.toLowerCase() === 'thead') {
				$(this).append($('#row1 th').clone(true));
			} else {
				if (idx === 1) {
					var td = $('<td colspan="2" align="center"></td>');
					$(this).find('td:last > *').each(function(idx){
						td.append($(this).clone(true));
					});
					$(this).append(td);
					td.find(':input').val('');
				} else {
					$(this).append($('#row2 > *').clone(true));
				}
			}
		});
	});

	$('a.detail').click(function(){$('#form').toggle(100); $('.layrester').toggle(100);});

	$('a.addrow').click(function() {
		var len = $('#condTable tr:first th').size();
		var tr = $('<tr></tr>');
		tr.append($('#row1 td:first').clone(true));
		for (var i = 1; i < len; i += 1) {
			tr.append($('#row2 > *').clone(true));
		}
		tr.appendTo($('#condTable'));
		$("#condTable").tableDnD();
	});

	$('button.delcol').click(function() {
		var span = function(item) {
			if (item.attr('colspan')) {
				return parseInt(item.attr('colspan'));
			}
			return 1;
		};

		var th = $(this).closest('th');
		var pos = $(this).closest('tr').children().index(th);
		var begin = 0, end = 0;
		$(this).closest('tr').find('th:lt(' + pos + ')').each(function(){
			begin = begin + span($(this));
		});
		end = begin + span(th);

		var target = [];
		target.push(th);

		$(this).closest('table').find('tr').each(function() {
			var i = 0;
			$(this).find('td').each(function() {
				if (begin <= i && i < end) {
					target.push($(this));
				} else if (end <= i) {
					return false;
				}
				i = i + span($(this));
			});
		});

		for (var i = 0, len = target.length; i < len; i += 1) {
			target[i].remove();
		}
	});
});
//]]>
</script>
</body>
</html>
